﻿(function () {
    "use strict";

    var categories;

    function showCategories() {
        var _t, _c, _name, _item, _url, _img;

        for (_t in categories) {
            _c = $('#' + _t);
            for (_name in categories[_t]) {
                _url = categories[_t][_name].icon.replace('w=?/h=?', 'w=210/h=300');
                _item = $('<div class="item"><div>' + _name + '</div></div>');
                _item.click(categories[_t][_name], function (event) {
                    Context.name = _name;
                    Context.detail = event.data;
                    WinJS.Navigation.navigate("/pages/design/design.html");
                });
                _img = $('<img />');
                _img.attr('src', _url);
                _item.append(_img);
                _c.append(_item);
            }
        }
    }

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            var _categoryUrl = C.BaseURL + C.CategoryName;
            WinJS.xhr({
                type: 'GET',
                url: _categoryUrl
            }).done(function (result) {
                if (result.status === 200) {
                    categories = JSON.parse(result.responseText);
                    showCategories();
                }
            }, function () { });
        }
    });
})();
